<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      >
<head th:replace="fragments/tabhead::headc"></head>
<!-- start body -->
<body>
<!-- start block -->
<th:block layout:fragment="content">
<div style="margin-top:15px">
	<!-- start form -->
	<form class="layui-form search" id="searchForm">
		  <div class="layui-form-item layui-elem-quote">
		  
		    <div class="layui-inline">
		      <label class="layui-form-label" style="width:100px">公司</label>
		      <div class="layui-input-inline" style="width:200px">
				<select name="companyId" id="companyId">
					<option th:each="ec:${actCenterCompanyMap}" th:value="${ec.id}" th:text="${ec.name}" th:selected="${ec.id}==${user}"></option>
				</select>
		      </div>
		    </div>
		      <div class="layui-inline">
		      <label class="layui-form-label" style="width:100px">角色名</label>
		      <div class="layui-input-inline" style="width:200px">
		        <input type="text" name="name" class="layui-input" placeholder="请输入角色名"/>
		      </div>
		    </div>
		    <div class="layui-inline">
		      <div class="layui-input-inline" style="width:150px;">
		        <button class="layui-btn" id="searchBtn" type="button" >查询</button>
		        <button class="layui-btn" id="addBtn" type="button" >新增</button>
		      </div>
		    </div>
		  </div>
	</form><!-- end form -->
</div>
<table class="layui-table"  id="tab" lay-filter="tab"></table>
<script>
var ins,editdialogindex,trobj;
$(function() {
	//start use
	layui.use('table', function(){
	  var table = layui.table;
	  //start render
	  ins=table.render({
		 elem:'#tab'
		 ,url:'/sys/role/table/data?first=true'
		 ,cols:[[
			  {field:'id',width:100, sort: true,title:'角色ID',fixed:'true'},
			  {field:'companyName', width:200,title:'公司名'},
		      {field:'name', width:200,title:'角色名称'},
		      {field:'statusName', width:100, sort: true,title:'状态'},
// 		      {field:'company_id', width:180,title:'所属公司'},
		      {field:'ctime', width:300, sort: true,title:'创建日期'},
		      {field:'remark',width:200,title:'备注'},
		      {align:'center',fixed:'right',width:300, toolbar:'#toolbar',title:'操作'}
		 ]]
	    ,page: true //是否显示分页
	    ,limits: [10,20,50]
	    ,limit:10 //每页默认显示的数量
		,done:function(res,curr,count){
// 			 console.log(res);
			 page = curr;
			    //得到当前页码
			    console.log(curr); 
			    
			    //得到数据总量
			    console.log(count);
		}
	  });
	  //start table on
	  table.on("tool(tab)",function(obj) {
		  var data = obj.data;//当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值
		  trobj = obj;
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		  if(layEvent == 'edit'){
			  $.get('/sys/role/table/edit?id='+data.id, {}, function(str){
					editdialogindex = layer.open({
										title:"修改角色信息",
									    type: 1,
									    area: ['380px', '370px'],
									    content: str, //注意，如果str是object，那么需要字符拼接。
									    zIndex:10
									  });
									});
		  }else if(layEvent == 'detail') {
			  $.get('/sys/role/table/openTree?id='+data.id, {}, function(str){
				  editdialogindex = layer.open({
						title:"设置权限",
					    type: 1,
					    area: ['410px', '480px'],
					    content: str, //注意，如果str是object，那么需要字符拼接。
					    zIndex:10
					  });
					});
		  }else if(layEvent == 'del') {
			  layer.confirm('确定删除该行单据', {icon: 3, title:'提示'}, function(index){
			    		 //向服务端发送删除指令
			    		$.get('/sys/role/table/del_execute?id='+data.id,{},function(result) {
			    			if(result.code == 200) {
							    layer.close(index);
							    reloadData();
							    layer.msg(result.message,{icon: 6});
							    return false;
			    			}else{
			    			 layer.msg(result.message,{icon: 0});
			    			 layer.close(index);
			    			 return false;
			    			} 
			    		});
			      
			      });
		  }else if(layEvent == 'tableinit') {
			  
			  $.get('/sys/role/table/table?roleId='+data.id, {}, function(str){
				  editdialogindex = layer.open({
						title:"表格权限配置",
					    type: 1,
					    area: ['800px', '500px'],
					    content: str, //注意，如果str是object，那么需要字符拼接。
					    zIndex:10
					  });
					});
// 			  var url="/sys/role/table/index";
//               menuOpen(url,"【"+data.name+"】的表格权限配置");	
		  }
	  });
	  //end table on
	  //页面新增
	  $("#addBtn").click(function() {
		  $.post('/sys/role/table/addinit',function(str) {
			  editdialogindex = layer.open({
					title:"新增菜单",
					type:1,
					area:['380px', '370px'],
					content:str,
					zIndex:10
				});
		  });
	  });
	  function reloadData(){
			$(".layui-laypage-btn")[0].click();//页面的确定按钮
		}
	  //页面查询按钮 start search
	  $("#searchBtn").click(function(){
			var phone = $("input[name='phone']").val();
			var table = layui.table;
		    ins.reload({url: '/sys/role/table/data',where:$("#searchForm").serializeJson()})
		    return false;
		});
	  //end search
	  
	});
	//end render
//end use
});
</script>
<script type="text/html" id="toolbar">
	<a class="layui-btn layui-btn-mini" lay-event="edit" >修改</a>
	{{#if (d.status != 2){}}
	<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" >删除</a>
	{{# }}}
	<a class="layui-btn  layui-btn-mini" lay-event="detail" >菜单权限</a>
	<a class="layui-btn  layui-btn-mini" lay-event="tableinit" >表格权限</a>
</script>
</th:block><!-- end block -->
</body><!-- end body -->
</html>

















</th:block>
</body>